<template>
  <div class="d-md-flex align-items-center justify-content-center">
    <div class="container text-center p-5 p-md-0">
      <div class="row mb-4">
        <div class="col-md-4 m-auto">
          <figure>
            <img class="img-fluid" src="@/assets/picture/404.svg" alt="image" />
          </figure>
        </div>
      </div>
      <h2 class="display-6">Page not found</h2>
      <p class="text-muted my-4">
        The page you want to go is not currently available
      </p>
      <div class="d-flex gap-3 justify-content-center">
        <router-link to="/" class="btn btn-primary">Home Page</router-link>
        <router-link to="#" class="btn bg-white">Back</router-link>
      </div>
    </div>
  </div>
</template>

<script>
// import "@/assets/css/app.min.css";
export default {
  name: "PageNotFound",
};
</script>

<style scoped></style>
